<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>菜单管理</title>
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
	<style type="text/css">
		#pId {
			display: flex;
			flex-wrap: wrap;
		}

		#pId>* {
			margin-right: 0;
		}

		#pId>.layui-inline {
			margin: 0;
			left: 0;
		}
	</style>
</head>

<body>
	<div class="admin-container">
		<div class="admin-main">
			<blockquote class="layui-elem-quote">
				后台导航菜单管理，本页内容修改后需点击清除缓存按钮才能生效
			</blockquote>
			<fieldset class="table-search-fieldset">
				<legend>搜索信息</legend>
				<form class="layui-form" lay-filter="search">
					<div class="layui-form-item">
						<div class="layui-inline" style="width: auto;">
							<div id="pId"></div>
						</div>
						<div class="layui-inline" style="width: 100px;">
							<select name="status">
								<option value="">不限状态</option>
								<option value="1">启用</option>
								<option value="0">禁用</option>
							</select>
						</div>
						<div class="layui-inline">
							<input type="text" name="title" maxlength="30" placeholder="标题" lay-verify="" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<input type="text" name="href" maxlength="255" placeholder="链接" lay-verify="" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="search-submit" style="display: flex;"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
						</div>
					</div>
				</form>
			</fieldset>
			<div class="layui-btn-group">
				<button class="layui-btn" id="btn-expand">全部展开</button>
				<button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
			</div>
			<table id="menu-list" class="layui-table" lay-filter="menu-list"></table>
		</div>
	</div>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="../assets/js/lay-config.js" charset="utf-8"></script>
	<script src="../assets/js/public.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['jquery', 'form', 'table', 'treeTable', 'iconPicker', 'selectN'], function() {
			var $ = layui.jquery,
				form = layui.form,
				table = layui.table,
				treeTable = layui.treeTable,
				iconPicker = layui.iconPicker,
				selectN = layui.selectN;

			var catIns;
			lianyi.request({
				url: lianyi.api('menu_list_title', 1),
				msg: null,
				success: function(res) {
					catIns = selectN({
						elem: '#pId', //元素容器【必填】
						data: res.data, //候选数据【必填】
						width: '100px', //设置宽度
						// selected: [res.data[0].id], //默认值
						last: true, //为真只取最后一个值
						tips: ['不限父级'], //空值项提示，可设置为数组['请选择省','请选择市','请选择县']
						filter: '', //事件过滤器，lay-filter名 不设置与选择器相同(去#.)
						name: 'pId', //input的name 不设置与选择器相同(去#.)
						delimiter: ',', //数据分隔符
						field: { idName: 'id', titleName: 'title', childName: 'child' }, //数据的键名
						formFilter: null //表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
					});
				}
			});

			var treeTableIns = treeTable.render({
				elem: '#menu-list',
				toolbar: '<div>' +
					'<div class="ew-tree-table-tool-item" title="添加" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>' +
					'<div class="ew-tree-table-tool-item" title="删除" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>' +
					'</div>',
				url: lianyi.api('menu_list', 1),
				method: 'POST',
				tree: {
					iconIndex: 2, // 折叠图标显示在第几列
					getIcon: function(d) { // 自定义图标
						if (d.icon) {
							return '<i class="ew-tree-icon {0}"></i>'.format(d.icon);
						} else if (d.child) {
							return '<i class="ew-tree-icon fa fa-folder"></i>';
						} else {
							return '<i class="ew-tree-icon fa fa-file"></i>';
						}
					},
					isPidData: true, // 是否是id、pid形式数据
					idName: 'id', // id字段名称
					pidName: 'pId', // pid字段名称
					childName: 'child'
				},
				cols: [
					[
						{ type: 'checkbox' },
						{ type: 'numbers' },
						{ field: 'title', minWidth: 200, title: '标题' },
						{ field: 'icon', title: '图标', minWidth: 60, align: 'center', templet: function(d) { return '<i class="{0}"></i>'.format(d.icon); } },
						{ field: 'href', title: '链接', minWidth: 100 },
						{
							field: 'target',
							title: '跳转方式',
							minWidth: 90,
							templet: function(d) {
								var targets = {
									_self: '当前窗口',
									_blank: '新窗口',
									_parent: '父窗口',
									_top: '顶层窗口'
								};
								return targets[d.target] || '';
							}
						},
						{ field: 'order', title: '排序', minWidth: 60, align: 'center' },
						{
							field: 'status',
							title: '状态',
							minWidth: 75,
							align: 'center',
							templet: function(d) {
								return '<i class="layui-icon {0}" style="font-size: 30px; color: {1};"></i>'
									.format(d.status === 1 ? 'layui-icon-ok-circle' : 'layui-icon-close-fill', d.status === 1 ? '#009688' : '#FF5722');
							}
						},
						{
							title: '操作',
							minWidth: 110,
							align: 'center',
							templet: function(d) {
								return '<div class="layui-btn-group">' +
									'<button type="button" lay-event="add" class="layui-btn layui-btn-xs layui-btn-normal" tips="添加"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></button>' +
									'<button type="button" lay-event="update" class="layui-btn layui-btn-xs layui-btn-warm" tips="修改"><i class="layui-icon layui-icon-edit" style="margin-right: 0px;"></i></button>' +
									'<button type="button" lay-event="delete" class="layui-btn layui-btn-xs layui-btn-danger" tips="删除"><i class="layui-icon layui-icon-delete" style="margin-right: 0px;"></i></button>' +
									'</div>';
							}
						}
					]
				],
				done: function(d) {
					treeTableIns.expandAll();
				}
			});

			// 监听toolbar点击事件
			treeTable.on('toolbar(menu-list)', function(obj) {
				var event = obj.event;
				switch (event) {
					case 'add':
						window.params = {};
						layer.open({
							title: '添加',
							shadeClose: true,
							maxmin: true,
							type: 2,
							content: lianyi.iframe('action'),
							area: ['360px', '380px'],
							success: function(layero, index) {
								// layer.iframeAuto(index);
							}
						});
						break;
					case 'update':
						break;
					case 'delete':
						var checkeds = treeTableIns.checkStatus(false),
							arr = {};
						if (checkeds.length < 1) return false;

						$.each(checkeds, function(i, v) {
							arr[v.id] = '<b style="color: red;">' + v.title + '</b>';
						});

						layer.confirm('确定删除(<b style="color: #ff0000;">' + checkeds.length + '个</b>)：' + Object.values(arr).join(", ") + ' ？', {
							title: '删除菜单',
							shadeClose: true,
							btn: ['删除', '取消'],
							btn1: function(index) {
								lianyi.request({
									url: lianyi.api('delete', 1),
									data: { id: Object.keys(arr).join(',') },
									msg: '正在删除...',
									success: function(res) {
										layer.close(index);
									}
								});
								return false;
							}
						});
						break;
				}
			});

			// 监听行单击事件
			treeTable.on('cell(menu-list)', function(obj) {
				var field = obj.field, //当前单元格的字段名
					data = obj.data; // 得到当前行数据

				switch (field) {
					case 'title':
						layer.prompt({
								title: '标题',
								formType: 0,
								shadeClose: true,
								maxlength: 30,
								value: data.title,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 30).on('input propertychange', function() {
										if (/^\s+/.test($(this).val())) $(this).val($(this).val().replace(/^\s+/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.title) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, title: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ title: value });
									}
								});
							}
						);
						break;
					case 'icon':
						layer.prompt({
								title: '图标',
								formType: 0, // 输入类型 0 普通input，1 密码，2 textarea
								shadeClose: true,
								allowBlank: true,
								maxlength: 50,
								value: data.icon,
								success: function(elem) {
									var input = $(elem).children('.layui-layer-content').css('overflow', 'visible').children('.layui-layer-input').attr('maxlength', 50);

									iconPicker.render({
										elem: input, // 选择器，推荐使用input
										url: "../assets/js/lay-module/iconPicker/4.7.0.json", // fa 图标接口
										search: true, // 是否开启搜索：true/false，默认true
										row: 3, // 每页图标行数，默认 3，<= 0 不开启分页
										column: 4, // 每行图标个数，默认 4
										width: '220px',
										select: function(fa) { // 选择回调
											// console.log(fa);
										},
										success: function(elem) { // 渲染成功后的回调
										}
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.icon || (data.icon === null && value === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, icon: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ icon: value });
									}
								});
							}
						);
						break;
					case 'href':
						layer.prompt({
								title: '链接',
								formType: 2,
								shadeClose: true,
								allowBlank: true,
								maxlength: 255,
								value: data.href,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr({ maxlength: 255, nowarp: true });
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.href || (data.href === null && value === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, href: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ href: value });
									}
								});
							}
						);
						break;
					case 'target':
						layer.open({
							title: '跳转方式',
							btn: ['确定', '取消'],
							shadeClose: true,
							type: 1,
							content: '<div class="layui-form">' +
								'<select name="target" lay-filter="target">' +
								'<option value="">默认</option>' +
								'<option value="_self">当前窗口</option>' +
								'<option value="_blank">新窗口</option>' +
								'<option value="_parent">父窗口</option>' +
								'<option value="_top">顶层窗口</option>' +
								'</select>' +
								'</div>',
							success: function(elem) {
								$(elem).children('.layui-layer-content').css('overflow', 'visible');
								$(elem).find('[name="target"]').val(data.target || '');
								form.render();
							},
							btn1: function(index, elem) {
								var value = $.trim($(elem).find('[name="target"]').val());
								if (value === data.target || (data.target === null && value === ''))
									return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, target: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ target: value });
									}
								});
							}
						});
						break;
					case 'order':
						layer.prompt({
								title: '排序',
								formType: 0,
								shadeClose: true,
								allowBlank: true,
								maxlength: 8,
								value: data.order,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 255).on('input propertychange', function() {
										if (/[^\d]/g.test($(this).val())) $(this).val($(this).val().replace(/[^\d]/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value !== '') value = parseInt(value);
								if (value === data.order || (data.order === null && value === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, order: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ order: value });
									}
								});
							}
						);
						break;
					case 'status':
						var status = data.status === 1 ? 0 : 1;
						lianyi.request({
							url: lianyi.api('update', 1),
							data: { id: data.id, status: status },
							msg: '正在' + (status === 1 ? '启用' : '禁用') + '菜单...',
							success: function(res) {
								obj.update({ status: status });
							}
						});
						break;
				}
			});

			treeTable.on('tool(menu-list)', function(obj) {
				var data = obj.data,
					event = obj.event;

				switch (event) {
					case 'add':
						window.params = {
							pId: data.pId,
							obj: obj
						};
						layer.open({
							title: '添加',
							shadeClose: true,
							maxmin: true,
							type: 2,
							content: lianyi.iframe('action'),
							area: ['360px', '380px'],
							success: function(layero, index) {
								// layer.iframeAuto(index);
							}
						});
						break;
					case 'update':
						window.params = {
							id: data.id,
							obj: obj
						};
						layer.open({
							title: '修改',
							shadeClose: true,
							maxmin: true,
							type: 2,
							content: lianyi.iframe('action'),
							area: ['360px', '380px'],
							success: function(layero, index) {
								// layer.iframeAuto(index);
							}
						});
						break;
					case 'delete':
						layer.confirm('确定删除：<b style="color: red;">' + data.title + '</b> ？<br/><b style="color: red;">注：该菜单下面的所有子菜单也会被删除！</b>', {
							title: '删除菜单',
							shadeClose: true,
							btn: ['删除', '取消'],
							btn1: function(index) {
								lianyi.request({
									url: lianyi.api('delete', 1),
									data: { id: data.id },
									msg: '正在删除...',
									success: function(res) {
										layer.close(index);
									}
								});
								return false;
							}
						});
						break;
				}
			});

			$('#btn-expand').click(function() {
				treeTableIns.expandAll();
			});

			$('#btn-fold').click(function() {
				treeTableIns.foldAll();
			});

			form.on('submit(search-submit)', function(obj) {
				var field = obj.field;
				field.pId = catIns.lastValue === '' && catIns.values.length > 1 ? catIns.values[catIns.values.length - 2] : catIns.lastValue;

				treeTableIns.reload({
					where: field
				});

				return false;
			});
		});
	</script>
</body>

</html>